<template>
	<view class="log-on">
		<u-navbar
			leftIconSize="35"
			:placeholder="false"
			bgColor="rgba(255,255,255,0)"
			@leftClick="leftClick"
			fixed
		></u-navbar>
		<view
			class="log-on-container w-750 b-box  bg-ff po-re"
			style="overflow-y: scroll;"
			:style="{ height: containerHeight }"
		>
			<view style="margin-bottom: 82rpx;" class="">
				<view
					class="w-750 b-box d-flex flex-r ali-i-e just-c"
					style="height: 300rpx;margin-bottom: 30rpx;"
				>
					<image
						:src="require('../static/login_log.png')"
						style="width: 198rpx;height: 198rpx;"
						mode=""
					></image>
				</view>
				<view class="w-750 b-box d-flex flex-r ali-i-c just-c">
					<text class="fw-500 pf-sc c-333" style="font-size: 50rpx;">车净净师傅端</text>
				</view>
			</view>
			<!--  -->
			<view class="w-750 b-box" style="padding: 0 74rpx;margin-bottom: 60rpx;">
				<view
					class="flex-c ali-i-s just-s"
					style="padding-bottom: 34rpx;margin-top: 44rpx;border-bottom: 2rpx solid #F1F1F1;"
				>
					<u-input
						border="none"
						placeholder="请输入账号"
						:customStyle="{ color: '#222222', font: '400 30rpx PingFang SC' }"
						placeholderStyle="color:#999999;fontWeight:400;fontsize:30px;fontfamily:PingFang SC-Regular, PingFang SC"
						v-model="requetParams.userName"
					></u-input>
				</view>
				<view
					class="flex-c ali-i-s just-s po-re"
					style="padding-bottom: 34rpx;margin-top: 44rpx;border-bottom: 2rpx solid #F1F1F1;"
				>
					<u-input
						border="none"
						placeholder="请输入密码"
						:password="showPwd"
						:customStyle="{
							boxSizing: 'border-box',
							paddingRight: '60rpx',
							color: '#333333',
							font: '400 30rpx PingFang SC'
						}"
						placeholderStyle="color:#999999;fontWeight:400;fontsize:30px;fontfamily:PingFang SC-Regular, PingFang SC"
						v-model="requetParams.userPwd"
					></u-input>
					<view class="po-ab" style="right: 0;top:5rpx">
						<image
							v-if="showPwd"
							@click="ShowPwd"
							:src="require('../static/showpwd.png')"
							style="width: 40rpx;height: 24rpx;"
							mode=""
						></image>
						<image
							v-else
							@click="ShowPwd"
							:src="require('../static/hidepwd.png')"
							style="width: 40rpx;height: 24rpx;"
							mode=""
						></image>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="w-750 b-box  d-flex flex-r ali-i-c just-c" @click="Login">
				<view
					style="height:84rpx;width:602rpx;line-height: 84rpx;
					 color:#ffffff;borderWidth:0rpx;background: linear-gradient(180deg, #4885C5 0%, #3B52A6 100%);
					border-radius:42rpx;text-align: center;"
				>
					登录
				</view>
			</view>

			<view
				class="w-750 b-box  d-flex flex-r ali-i-c just-c"
				@click="goWorker"
				style="margin-top: 80rpx;"
			>
				<view
					style="height:84rpx;width:602rpx;line-height: 84rpx;
					 color:#ffffff;borderWidth:0rpx;background: linear-gradient(180deg, #4885C5 0%, #3B52A6 100%);
					border-radius:42rpx;text-align: center;"
				>
					申请
				</view>
			</view>
			<!-- 联系客服 -->
			<view
				class="w-750 b-box d-flex flex-r ali-i-c just-c po-ab"
				style="bottom: 88rpx;left: 0;right: 0;"
			>
				<view class="d-flex flex-r ali-i-c just-c" @click="Contact">
					<view style="width: 38rpx;height: 38rpx;margin-right:12rpx">
						<image :src="require('../static/kefu.png')" style="width: 38rpx;height: 38rpx;"></image>
					</view>
					<text class="pf-sc fw-400 " style="color: #999999;font-size: 30rpx;">联系客服</text>
				</view>
			</view>
		</view>
		<!-- <u-toast ref="uToast"></u-toast> -->
		<Contact-the-customer
			ref="customModel"
			:show="ModelShow"
			:top="'30rpx'"
			:confirmText="confirmText"
			:success="ModelStatus"
			:cancelText="cancelText"
			:height="height"
			:Cancelcolor="Cancelcolor"
			:color="color"
			:userName="userName"
			:showCloseIcon="showCloseIcon"
			@cancel="ModelCancel"
			@confirm="ModelConfirm"
			:title="ModelTitle"
		/>
	</view>
</template>

<script>
import { workerlogin, kefu } from '@/common/api.js';
import ContactTheCustomer from '../components/Contact-the-customer/Contact-the-customer.vue';
/* 	import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
	import Uinput from '../components/uview-ui/components/u-input/u-input';
	
	import Utoast from '../components/uview-ui/components/u-toast/u-toast'; */

import { _containerHeight } from '@/utils/GetSys.js';
export default {
	components: {
		// 'u-navbar': Unavbar,
		// 'u-input': Uinput,
		// 'u-button': Ubutton,
		// 'u-toast': Utoast,
		// 'Contact-the-customer':ContactTheCustomer
	},
	data() {
		return {
			CurrentClient: uni.getStorageSync('CurrentClient'), //0:用户；1：师傅
			containerHeight: '',
			btnDisabled: true, //禁用登录按钮
			showPwd: true,
			requetParams: {
				userName: '',
				userPwd: ''
			},
			// 模态框
			ModelShow: false,
			ModelStatus: false, //客服
			ModelTitle: '',
			confirmText: '',
			cancelText: '',
			color: '',
			height: '',
			userName: '',
			showCloseIcon: '',
			Cancelcolor: '',
			phone: ''
		};
	},
	watch: {
		requetParams: {
			handler(newVal) {
				newVal.userName === '' || newVal.userPwd === ''
					? (this.btnDisabled = true)
					: (this.btnDisabled = false);
			},
			deep: true
		}
	},
	onShow() {},
	methods: {
		leftClick() {
			uni.navigateBack();
		},
		goWorker() {
			uni.navigateTo({
				url: `/staffModelA/staffB/Authentication/Authentication`
			});
		},
		Login() {
			if (this.requetParams.userName == '') {
				uni.showToast({
					title: '账号不能为空',
					icon: 'none'
				});
				return;
			}
			if (this.requetParams.userPwd == '') {
				uni.showToast({
					title: '密码不能为空',
					icon: 'none'
				});
				return;
			}
			// this.$store.commit('CommitCurrentClient',1);
			let params = {
				account: this.requetParams.userName,
				password: this.requetParams.userPwd
			};
			workerlogin(params).then(res => {
				if (res.data.code == 1) {
					uni.showToast({
						title: '登录成功'
					});
					setTimeout(() => {
						uni.reLaunch({
							url: `/pages/UserHomePage/UserHomePage`
						});
					}, 1500);

					uni.setStorageSync('user', res.data.data);
					uni.setStorageSync('usertoken', res.data.data.token);
					uni.removeStorageSync('userCent');
					uni.removeStorageSync('userLocation');
					uni.removeStorageSync('AnnuallyUser');
					this.CurrentClient = 1;
					uni.setStorageSync('CurrentClient', 1);
				} else {
					uni.showToast({
						title: '账号或者密码错误',
						icon: 'none'
					});
				}
			});
		},
		ShowPwd() {
			this.showPwd = !this.showPwd;
		},
		Contact() {
			// 弹出客服联系电话模态框
			//联系客服
			kefu().then(res => {
				if (res.data.code === 1) {
					// 弹出客服联系电话模态框
					this.phone = res.data.data;
					this.ModelStatus = false; //客服
					this.ModelTitle = '客服电话：' + res.data.data;
					this.confirmText = '拨打电话';
					this.cancelText = '取消';
					this.Cancelcolor = '#999999';
					this.color = '#FF5C00';
					this.height = '80rpx';
					this.userName = '';
					this.showCloseIcon = false;
					this.ModelShow = true;
				}
			});
		},
		ModelCancel() {
			//关闭模态框
			this.ModelShow = false;
		},
		ModelConfirm() {
			this.ModelShow = false;
			uni.makePhoneCall({
				phoneNumber: `${this.phone}`,
				complete(e) {
					console.log(e);
				}
			});
		}
	},
	onLoad() {
		this.containerHeight = _containerHeight();
	}
};
</script>

<style lang="scss">
.log-on {
	.log-on-container {
	}
}
</style>
